<template>
    <div>
        <el-dialog :title="dialogOpt.title" :visible.sync="importDialog" :before-close="closeDialog">
            <div :style="dialogOpt.style" ref="importMessageBox">
                <el-button @click="closeMyDialog()" >关闭</el-button>
                <div v-for="(item,index) in dialogOpt.messageList" :key="index">
                    <span :class="item.status==='-1'?'el-icon-circle-close cl-danger':' el-icon-circle-check cl-success'"></span>
                    <span>{{item.content}}</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name:'webosocket',
    data(){
        return {
            webSocket:null,
            dialogOpt:{
                title:"导入日志",
                style:{
                    'max-height':'500px',
                    'overflow-y': 'auto'
                },
                messageList:[],
            }
        }
    },
    computed:{
        importStatus(){
            return this.$store.state.importStatus
        },
        importDialog(){
            return this.$store.state.importDialog
        }
    },
    created() {
        // 页面打开就建立连接，根据业务需要
        this.initSocket()
    },
    destroyed() {
        // 页面销毁关闭连接
        this.webSocket.close()
    },
    methods:{
        initSocket(){
            // 有参数的情况下：
            let url = this.apiConfig.wsHost;
            this.webSocket = new WebSocket(url)
            this.webSocket.onopen = this.webSocketOnOpen
            this.webSocket.onclose = this.webSocketOnClose
            this.webSocket.onmessage = this.webSocketOnMessage
            this.webSocket.onerror = this.webSocketOnError
        },
        webSocketOnOpen(){
            // 建立连接成功后的状态
            console.log('websocket连接成功')
            this.webSocket.send(sessionStorage.getItem("tokenId"));
        },
         // 获取到后台消息的事件，操作数据的代码在onmessage中书写
        webSocketOnMessage(res){
            let self = this;
            let importJson=JSON.parse(res.data);
            // res就是后台实时传过来的数据
             console.log(importJson);
            if(self.dialogOpt.messageList.length>20){
                self.dialogOpt.messageList.splice(0,1)
            }
            self.dialogOpt.messageList.push({
                    status:importJson.stateCode,
                    content:importJson.content
                })
            switch(importJson.stateCode){
                case '0':
                    self.$store.commit('updateImportStatus',importJson.stateCode);
                    self.$store.commit('updateImportDialog',true);
                    break;
                case '1':
                    self.importStatus!=='1'?self.$store.commit('updateImportStatus',importJson.stateCode):'';
                    break;
                case '-1':
                    self.importStatus!=='-1'?self.$store.commit('updateImportStatus',importJson.stateCode):'';
                    break;
                case '2':
                    self.$store.commit('updateImportStatus','3');
                    self.$message({
                        message: '导入完成',
                        type: 'success',
                        onClose(){
                            
                        }
                    });
                break;
            }
        },
        closeMyDialog(){
            let self = this;
            self.$store.commit('updateImportDialog',false);
             self.dialogOpt.messageList=[];
        },
        // 关闭连接
        webSocketOnClose(){
             console.log('websocket连接已关闭');
        },
        //连接失败的事件
        webSocketOnError(res){
            console.log('websocket连接失败');
            // 打印失败的数据
            console.log(res);
        },
        closeDialog(done){
            this.$store.commit('updateImportDialog',false)
        }

    }
}
</script>
<style scoped>

</style>
